<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue实现倒计时</title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<style>
			.red {
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div :class="cla">{{ time + '秒' }}</div>
		</div>
		<script>
		  const { createApp, ref } = Vue
		  const app = createApp({
			  setup() {
				  // 定义数据
				  const time = ref(20)
				  const cla = ref('')
				  const i = setInterval(() => {
					  time.value --
					  if(time.value <= 10) {
						  // 手动修改
						  cla.value = 'red' // 这是一个预定义的类名
					  }
					  if(time.value <= 0) {
						  clearInterval(i)
					  }
				  }, 1000)
				  return {time, cla} //数据要return
			  }
		  })
		  app.mount('#app')
		</script>
	</body>
</html>